<template>
  <div class="dialogTransfer">
    <el-transfer
      :titles="titles"
      :format="format"
      :button-texts="button_texts"
      :filterable="search.showSearch"
      :filter-method="filterMethod"
      :filter-placeholder="search.placeholder"
      :data="transDatasActive"
      :props="alias"
      :render-content="randerCustom"
      v-model="value"
    >
    </el-transfer>
  </div>
</template>
<script>
export default {
  name: "dialog-transfer",
  props: {
    titles: {
      typeof: Array,
      default: () => {
        return ["左侧标题", "右侧标题"];
      },
    },

    button_texts: {
      typeof: Array,
      default: () => {
        return ["左侧按钮", "右侧按钮"];
      },
    },

    transDatas: {
      typeof: Array,
      default: () => {
        return [
          {
            key: "key",
            label: "测试1",
            disabled: false,
          },
        ];
      },
    },

    alias: {
      typeof: Object,
      default: () => {
        return {
          key: "key",
          label: "label",
        };
      },
    },

    search: {
      typeof: Object,
      default: () => {
        return {
          showSearch: true,
          searchKey: "label",
          placeholder: "请输入关键词",
        };
      },
    },
  },
  data() {
    /**
     * @author QL
     * @functionName searchFilter
     * @param { String } query
     * @param { Object } item
     * @date 2022-01-24 11:57:06
     * @version V..
     * @description 自定义搜索方法逻辑
     */
    const searchFilter = (query, item) => {
      return item[this.search.searchKey].indexOf(query) > -1;
    };

    /**
     * @author QL
     * @functionName randerRule
     * @param { any } h
     * @param { Object } option
     * @date 2022-01-24 11:56:18
     * @version V..
     * @description 自定义穿梭狂行数据的显示格式
     */
    const randerRule = (h, option) => {
      return (
        <span>
          {option.key} - {option.label}
        </span>
      );
    };

    return {
      value: [],

      format: {
        noChecked: "0/${total}",
        hasChecked: "${checked}/${total}",
      },

      filterMethod: searchFilter,

      randerCustom: randerRule,
    };
  },
  computed: {
    transDatasActive() {
      return this.transDatas;
    },
  },
  watch:{
      value(nv, ov){
          this.$emit("transferChange", nv);
      }
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.dialogTransfer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
</style>